<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			.controller {
				box-sizing: border-box;
				margin: 100px auto;
				border-radius: 10px;
				display: flex;
				height: 80px;
				width: 600px;
				background-color: cadetblue;
				align-items: center;
			}

			.controller .pic {
				width: 60px;
				height: 60px;
				background-color: aliceblue;
				margin-left: 10px;
			}

			.controller .pic img {
				width: 100%;
				height: 100%;
			}

			.controller .nprogress {
				height: 60px;
				display: flex;
				flex-direction: column;
				margin-left: 10px;
				justify-content: space-around;
			}

			.controller .nprogress .line {
				width: 200px;
				height: 10px;
				background-color: azure;
				border-radius: 10px;
				cursor: pointer;
			}

			.controller .desc {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;
			}

			.controller .btns {
				height: 60px;
				width: 300px;
				margin-left: 20px;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}

			.controller .btns .prev {
				width: 40px;
				height: 40px;
				background-image: url(imgs/prev.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			.controller .btns .next {
				width: 40px;
				height: 40px;
				background-image: url(imgs/next.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			.controller .btns .play {
				width: 40px;
				height: 40px;
				background-image: url(imgs/play.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			.controller .btns .pause {
				width: 40px;
				height: 40px;
				background-image: url(imgs/pause.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				display: none;
			}

			.progress-done {
				background: linear-gradient(to left, rgb(242, 112, 156), rgb(255, 148, 114));
				box-shadow: 0 3px 3px -5px rgb(242, 112, 156), 0 2px 5px rgb(242, 112, 156);
				border-radius: 5px;
				height: 10px;
				width: 0;
				/* transition: width 1s ease 0.3s; */
			}
		</style>
	</head>
	<body>
		<audio src="./music/tw.mp3">
			当前浏览器不支持audio
		</audio>
		<div class="controller">
			<div class="pic">
				<img src="./imgs/dog.jpg">
			</div>
			<div class="nprogress">
				<div class="desc">
					<div class="title">缘分一道桥</div>
					<div class="time"><span class="min">0</span>:<span class="sec">00</span></div>
				</div>
				<div class="line">
					<div class="progress-done" data-done="100" style="width: 0;"></div>
				</div>
			</div>
			<div class="btns">
				<div class="prev"></div>
				<div class="play"></div>
				<div class="pause"></div>
				<div class="next"></div>
			</div>
		</div>
		<script type="text/javascript">
			// 获取按钮
			var audio = document.querySelector('audio')
			var playBtn = document.querySelector('.play')
			var pauseBtn = document.querySelector('.pause')
			var prevBtn = document.querySelector('.prev')
			var nextBtn = document.querySelector('.next')
			var progress = document.querySelector('.progress-done')
			var line = document.querySelector('.line')
			var body = document.body
			var intervalId;

			// 播放
			playBtn.onclick = function() {
				console.dir(audio)
				intervalId = setInterval(function() {
					var min = Math.floor(audio.currentTime / 60)
					var minSpan = document.querySelector('.min')
					minSpan.innerHTML = min
					var sec = Math.floor(audio.currentTime % 60)
					var secSpan = document.querySelector('.sec')
					secSpan.innerHTML = sec < 10 ? '0' + sec : sec
					// 设置进度条
					let total = audio.duration
					let current = audio.currentTime
					let nPro = current / total * 100
					progress.style.width = nPro + '%'
				}, 100)
				audio.play()
				this.style.display = 'none'
				pauseBtn.style.display = 'flex'
			}

			// 暂停
			pauseBtn.onclick = function() {
				audio.pause()
				this.style.display = 'none'
				playBtn.style.display = 'flex'
			}

			// 下一首
			nextBtn.onclick = function() {
				audio.src = './music/aa.mp3'
				playBtn.onclick()
			}
			var nPro;
			// 拖拽
			line.onmousedown = function(e) {
				var that = this;
				// console.log(e)
				var w = e.offsetX / 2
				// console.log(w)
				nPro = w / 100 * 100
				// console.log(nPro)
				progress.style.width = nPro + '%'
				// audio.currentTime = nPro
				audio.currentTime = nPro * audio.duration / 100
				console.log(nPro * audio.duration / 100)
				playBtn.onclick()
				body.onmousemove = function(event) {
					// console.log(event)
					w = event.offsetX / 2
					console.log(w)
					if (w < 0)
						w = 0;
					else if (w > 100)
						w = 100
					nPro = w / 100 * 100
					progress.style.width = nPro + '%'
					audio.currentTime = nPro * audio.duration / 100
					// console.log(nPro)
					// audio.currentTime = nPro
					playBtn.onclick()
				}
			}

			body.onmouseup = function() {
				body.onmousemove = null; //弹起鼠标不做任何操作
				
			}
		</script>
	</body>
</html>
